import React from "react";
import { Route, Link, Switch, Redirect, NavLink } from "react-router-dom";
import { Layout, Menu } from "antd";
import Home from "./pages/home";

const { Header, Footer, Sider, Content } = Layout;

const Nav = () => (
	// <Layout>
	// 	{/* <Header theme="light" style={{ padding: "0" }}> */}
	// 	<Header>
	// 		<div className="logo" style={{ height: "50px", width: "200px", float: "left" }} />
	// 		<Menu mode="horizontal" theme={theme} style={{ lineHeight: "64px" }}>
	// 			<Menu.Item key="1">
	// 				<Link to="/aa">aa</Link>
	// 			</Menu.Item>
	// 			<Menu.Item key="2">nav 2</Menu.Item>
	// 			<Menu.Item key="3">nav 3</Menu.Item>
	// 		</Menu>
	// 	</Header>
	// </Layout>
	<Layout>
		<Header>
			<div className="logo" style={{ height: "50px", width: "200px", float: "left" }} />
			<Menu defaultSelectedKeys={["1"]} mode="horizontal" theme="dark" style={{ lineHeight: "64px" }}>
				<Menu.Item key="1">
					<NavLink to="/aa">aa</NavLink>
				</Menu.Item>
				<Menu.Item key="2">nav 2</Menu.Item>
				<Menu.Item key="3">nav 3</Menu.Item>
			</Menu>
		</Header>
		<Switch>
			{/* <Route exact path="/" component={Home} /> */}
			<Route path="/aa" component={Home} />
			<Redirect path="/" to={{ pathname: "/aa" }} />
		</Switch>
	</Layout>
);

const App: React.FC = () => {
	return <Nav />;
};

export default App;
